#include("../layout.html")
#@layout("上传新媒体文件")

#define head()
<style>
.media-item {
	min-height: 36px;
	margin-bottom: 1px;
	position: relative;
	width: 100%;
	background: #fff;
	box-shadow: 0 1px 0 #ddd;
}
.media-item .pinkynail {
	float: left;
	margin: 2px 10px 0 3px;
	max-width: 40px;
	max-height: 32px;
}
.media-item .edit-attachment {
	display: block;
	line-height: 36px;
	float: right;
	margin-right: 10px;
}
.media-item .filename {
	line-height: 36px;
	overflow: hidden;
	margin-left: 6px;
}
.media-item .progress {
    float: right;
    margin: 9px 6px;
    width: 200px;
    overflow: hidden;
}

#async-upload-wrap a {
    display: none;
}

p {
    margin: 1em 0;
}
</style>
#end

#define body()
<h1 class="wp-heading-inline">上传新媒体文件</h1>
<hr class="wp-header-end">

<div class="layui-fluid">
	<input type="hidden" id="post_author" value="#(loginUser.ID)"/>
    <div id="plupload-upload-ui">
        <div class="layui-upload-drag" id="upload" style="width:100%;padding:70px 0;">
            <i class="layui-icon">&#xe67c;</i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div class="clear"></div>
        <p class="upload-flash-bypass">
            您正在使用多文件上传工具。遇到问题？请尝试使用<a href="#">标准浏览器上传工具</a> 。
        </p>
    </div>
    <div id="html-upload-ui" class="hide-if-js">
        <p id="async-upload-wrap">
            <label class="screen-reader-text" for="async-upload">上传</label>
            <input type="file" name="async-upload" id="async-upload">
            <input type="submit" name="html-upload" id="html-upload" class="layui-btn layui-btn-sm" value="上传">
            <a href="#" onclick="try{top.tb_remove();}catch(e){}; return false;">取消</a>
        </p>
        <div class="clear"></div>
        <p class="upload-html-bypass hide-if-no-js">
            您正在使用浏览器内置的标准上传工具。WordPress提供了全新的上传工具，支持多选、拖放上传功能。<a href="#">改用新的上传工具</a>。
        </p>
    </div>
	<p class="max-upload-size" style="font-size: 13px;line-height: 1.5;margin: 1em 0;">最大上传文件大小：32 MB。</p>
	<div id="media-items" style="display:none;">
		
	</div>
</div>
#end

#define foot()
<script>
layui.use(['upload', 'element', 'tbynet'], function(){
	var $ = layui.$
	,upload = layui.upload
	,element = layui.element
	,tbynet = layui.tbynet;
	
	//拖拽上传
	upload.render({
	    elem: '#upload'
	    ,url: '/admin/attachment/save'
	    ,auto: false
	    ,multiple: true
	    ,data: {
    	  	post_author: function(){
    		    return $('#post_author').val();
			}
   		}
	    ,choose: function(obj){
	        //将每次选择的文件追加到文件队列
	        var files = obj.pushFile();
	        
	        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
	        obj.preview(function(index, file, result){
	          	console.log(index); //得到文件索引
	          	console.log(file); //得到文件对象
	          	console.log(result); //得到文件base64编码，比如图片
	          	
	          	$('#media-items').append('<div class="media-item" id="media-item-'+ index +'">\
					<img class="pinkynail" src="'+ result +'" alt="">\
					<a class="edit-attachment" href="" target="_blank">编辑</a>\
					<div class="layui-progress layui-progress-big progress" lay-showPercent="true" lay-filter="demo">\
						<div class="layui-progress-bar layui-bg-blue" lay-percent="80%">80%</div>\
					</div>\
					<div class="filename new"><span class="title">IMG_0612</span></div>\
				</div>');
	          	
	          	element.progress('demo', '80%');
	          	
	          	obj.upload(index, file);
	          	
	          	//obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
	          
	          	//这里还可以做一些 append 文件列表 DOM 的操作
	          
	          	//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
	          	//delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
	        });
	        
	        $('#media-items').show();
	    }
		,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
		    
		}
	    ,done: function(res, index, upload){
	      	console.log(res)
	    }
	});
});
</script>
#end